import React from 'react';

import {
  Modal,
  Form,
  Input,
  Checkbox,
} from 'antd';

const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  }
}

const tailLayout = {
  wrapperCol: {
    offset: 6,
    span: 14,
  }
}

const Demo = (props) => {

  const onFinish = (values) => {
    console.log('Finish Values: ', values)
    props.onLogin(values);
  }
  const onFinishFailed = (errInfo) => {
    console.log('errInfo: ', errInfo)
  }
  
  return (
    <Modal
      title="登录"
      // onOk={onOk}
      okText="登录"
      cancelText="取消"
      okButtonProps={{ htmlType: "submit", form: "loginForm" }}
      visible={ props.loginModalVisible }
    >
      <Form
        {...layout}
        id="loginForm"
        name="basic"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        initialValues={{
          remember: true,
        }}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: '用户名不可为空',
            }
          ]}
        >
          <Input />
        </Form.Item>
  
        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: '密码不可为空',
            }
          ]}
        >
          <Input.Password />
        </Form.Item>
  
        <Form.Item
          {...tailLayout}
          name="remember"
          valuePropName="checked"
        >
          <Checkbox>记住密码</Checkbox>
        </Form.Item>

      </Form>
    </Modal>
  )
}

export default Demo;